<template>
  <div id="user-information" class="animate__animated animate__slideInRight">
    <!-- 需要收集名称，头像路径，密码，二次密码确认，手机号，邮箱，姓名，性别，生日 -->
    <!-- 此处的上传接口有问题，后续改为阿里云的路径结合后端来 -->
    <el-form
      ref="registerFormRef"
      style="max-width: 600px; margin: 0 auto"
      :model="registerForm"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="用户名" prop="username" required>
        <el-input v-model="registerForm.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password" required>
        <el-input type="password" v-model="registerForm.password" />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirm_password" required>
        <el-input type="password" v-model="registerForm.confirm_password" />
      </el-form-item>
      <el-form-item label="真实姓名" prop="name">
        <el-input v-model="registerForm.name" />
      </el-form-item>
      <el-form-item label="性别" prop="sex" required>
        <el-radio-group v-model="registerForm.sex">
          <el-radio value="女">女</el-radio>
          <el-radio value="男">男</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" prop="phone" required>
        <el-input v-model="registerForm.phone" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email" required>
        <el-input v-model="registerForm.email" />
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday" required>
        <el-date-picker
          type="date"
          aria-label="请选择您的生日"
          placeholder="请选择你的生日"
          v-model="registerForm.birthday"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitRegister"> 提交</el-button>
        <el-button @click="submitReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { type User } from '@/utils/dataType/UserModel.ts'
import router from '@/router'
import { userRegisterMessageStore } from '@/stores/userRegisterMessageStore'
import { formatDate } from '@/utils/commonMessage/common.js'

interface RegisterForm {
  // imageUrl: string
  username: string
  avatar: string
  password: string
  confirm_password: string
  phone: string
  email: string
  name: string
  sex: string
  birthday: string
  desc: string
}

const registerFormRef = ref<FormInstance>()
// const registerForm = reactive<RegisterForm>({
//     // imageUrl: '',
//     username: '',
//     avatar: '',
//     password: '',
//     confirm_password: '',
//     phone: '',
//     email: '',
//     name: '',
//     sex: 'female',
//     birthday: '',
//     desc: '在TravelAid留下旅行的一角~',
// })
const registerForm = userRegisterMessageStore().userInformation

const rules = reactive<FormRules<RegisterForm>>({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    { required: true, message: '请设置您的密码', trigger: 'blur' },
    { min: 5, max: 12, message: '密码需要在5-12位之间', trigger: 'blur' },
  ],
  confirm_password: [{ required: true, message: '请输入二次密码', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
  birthday: [{ required: true, message: '请输入生日', trigger: 'blur' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
})
const userStore = userRegisterMessageStore()

async function submitRegister() {
  if (!registerFormRef.value) return
  registerFormRef.value.validate((valid) => {
    if (valid) {
      const user: user = {
        username: registerForm.username,
        password: registerForm.password,
        phone: registerForm.phone,
        email: registerForm.email,
        name: registerForm.name,
        sex: registerForm.sex,
        birthday: formatDate(registerForm.birthday),
      }
      userStore.setUserInformation(user)
      router.push({
        path: '/user-register/register3',
        replace: true,
      })
    }
  })
}
</script>

<style scoped>
#user-information {
  width: 85%;
  margin: auto 0;
}

.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>
